<template>
  <!-- Swiper -->
  <div class="swiper-container">
    <h4 style="margin-top:0%;margin-left:5%;font-size:21px;margin-bottom:3%">{{title}}</h4>
    <div class="swiper-wrapper swipeCard">
      <div class="swiper-slide" v-for="m in list" :key="m.id">
        <div class="item">
          <router-link :to="{name:'detail',params:{id:m.id,cover:m.cover,title:m.title,nick:m.v_user[0].nick,avatar:m.v_user[0].avatar}}">
            <div>
              <img v-bind:class="{imgs:isChange,imgs1:change}" :src="m.cover" />
            </div>
            <div>{{m.title}}</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  props: ["list", "title", "change","count"],
  data() {
    return {
      isChange: true,
    };
  },
  mounted() {

    // if (this.change == true) {
    //   this.isChange = false;
    // }

    new Swiper(".swiper-container", {
      slidesPerView: '3',
      spaceBetween: -23,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,
      pagination: {
        clickable: true
      }
    });
  }
};
</script>

<style>
.swiper-container {
  /* background-color: aliceblue; */
  width: 100%;
  height: 208px;
  margin-bottom: 2%;
}

.swipeCard {
  display: flex;
  flex-direction: row;
  margin-left: 3%;
}

.swiper-slide{
  width: 165px;
}
.item {
  height: 166px;
  width: 130px;
  margin-left: 5%;
  font-size: 15px;
}
.imgs {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}

/* .imgs1 {
  width: 220px;
  height: 120px;
  border-radius: 10px;
} */

a {
  text-decoration: none;
}

.item div {
  color: #000;
}
</style>